<template>
    <div>
        <el-dialog v-model="dialogFormVisible" :title="Toptitle">
            <el-form :model="form" ref="ruleFormRef" :rules="rules">
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="上级菜单" :label-width="formLabelWidth">
                    <el-select v-model="form.pid" @change="cha" placeholder="请选择上级菜单">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <div v-for="item in menulist" :key="item.id">
                            <el-option :label="item.title" :value="item.id"></el-option>
                        </div>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" :label-width="formLabelWidth" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio disabled :label="1">目录</el-radio>
                        <el-radio disabled :label="2">菜单</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="form.type == 1 ? '菜单图标' : '菜单地址'" :label-width="formLabelWidth">
                    <el-input v-if="form.type == 1" v-model="form.icon" autocomplete="off"></el-input>
                    <el-input v-if="form.type == 2" v-model="form.url" autocomplete="off"></el-input>


                    <!-- <el-select v-if="form.type == 2" v-model="form.url" placeholder="请选择上级菜单">
                        <div>
                            <el-option v-for="item in apiurl" :key="item.path" :label="item.title" :value="item.path">
                            </el-option>
                        </div>
                    </el-select> -->

                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="add">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script  lang="ts" setup>
import { reactive, ref, defineExpose, computed } from 'vue'
import { useStore } from 'vuex'
import type { FormInstance, FormRules } from 'element-plus'
import { menuadd, menuinfo, menuedit } from '../../request/app'
import emitter from '@/assets/JS/mybus'

let form = ref({
    title: '',
    type: 1,
    icon: '',
    status: 1,
    pid: 0,
    url: '',
})
let isflag = ref(true)
let isID = ref<any>(null)

const ruleFormRef = ref<FormInstance>()
let Toptitle = ref('添加菜单')
const store = useStore()
// 派遣行动加载数据列表
async function patch() {
    await store.dispatch('setshop/ACgetlist')
}
patch()
// 获取数据列表
const menulist = computed(() => store.getters["setshop/getlist"]);

const rules = reactive<FormRules>({
    title: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
    ],
})

// 兄弟触发事件
const dialogFormVisible = ref<boolean>(false)
const formLabelWidth = '140px'

function addtost(): void {
    Toptitle.value = '添加菜单'
    isflag.value = true
    dialogFormVisible.value = true
}
defineExpose({
    addtost
})
// 打开修改弹框
emitter.on("iseditId", id => {
    dialogFormVisible.value = true;
    isflag.value = false
    isID.value = id
    console.log(id);
    menuinfo({ id }).then((res: any) => {
        console.log(res.data.list);
        form.value = res.data.list
        Toptitle.value = '修改菜单'
    })

})

// 点击确认时的修改时间
function add() {
    dialogFormVisible.value = false;
    // console.log(form);
    if (isflag.value) {
        console.log(form.value, '添加');
        menuadd(form.value).then(res => {
            // console.log(res);
            patch()
        })
    } else {
        console.log(form.value, '修改');
        menuedit({
            id: isID.value,
            ...form.value
        }).then((res: any) => {
            console.log(res, '修改');
            patch()
        })

    }

}

function gettype() {
    if (form.value.pid == 0) {
        form.value.type = 1
        return 1
    } else {
        form.value.type = 2
        return 2
    }
}
function cha() {
    console.log(21111111);
    gettype()
}

</script>
<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
